<script setup>
import {
  ref,
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
  computed,
  reactive,
  toRefs,
} from "vue";
// 全选反选1
const one = ref(false);
const two = ref(false);
const three = ref(false);
const all = computed({
  get() {
    return one.value && two.value && three.value;
  },
  set(value) {
    one.value = value;
    two.value = value;
    three.value = value;
  },
});
// 全选反选2
const a = ref(false);
const b = ref(false);
const c = ref(false);
const qb = computed({
  get() {
    return a.value && b.value && c.value;
  },
  set(value) {
    a.value = value;
    b.value = value;
    c.value = value;
  },
});
// 全选反选3
const y = ref(false);
const e = ref(false);
const s = ref(false);
const sy = computed({
  get() {
    return y.value && e.value && s.value;
  },
  set(value) {
    y.value = value;
    e.value = value;
    s.value = value;
  },
});

// 生命周期
// 创建
// 挂载前
onBeforeMount(() => {
  console.log("挂载前:onBeforeMount");
});

// 挂载后
onMounted(() => {
  console.log("挂载后:onMounted");
});
// 更改前
onBeforeUpdate(() => {
  console.log("更改前:onBeforeUpdate");
});
// 更改后
onUpdated(() => {
  console.log("更改后:onUpdated");
});
// 卸载前
onBeforeUnmount(() => {
  console.log("卸载前:onBeforeUnmount");
});
// 卸载后
onUnmounted(() => {
  console.log("卸载后:onUnmounted");
});

// reactive
// 1.
const robj = reactive({
  name: "jj",
  age: 18,
});
const Ck = () => {
  Object.assign(robj, {
    name: "jay",
    age: 20,
  });
};
// 2.
const reobj = reactive({
  price: "100",
  id: 20022,
});
const Cke = () => {
  Object.assign(reobj, {
    price: "99",
    id: 23232,
  });
};

// 3.
const rsobj = reactive({
  sex: "男",
  hobby: ["html", "css"],
});
const Cks = () => {
  Object.assign(rsobj, {
    sex: "女",
    hobby: ["vue", "webpack"],
  });
};

// v-bind
const l = true;
const i = true;
const li = false;
const imgUrl = ref("https://trigger.uno/src/assets/mcdd_bx.jpg");
console.log(imgUrl.value);
const imgUrl1 = "/src/assets/1.jpg";
</script>

<template>
  <!-- 全选反选 -->
  <div>
    <h2>全选反选1</h2>
    <ul>
      <li><input type="checkbox" v-model="all" />全选</li>
      <li><input type="checkbox" v-model="one" />球鞋</li>
      <li><input type="checkbox" v-model="two" />小提琴</li>
      <li><input type="checkbox" v-model="three" />卫衣</li>
    </ul>
  </div>
  <div>
    <h2>全选反选2</h2>
    <ul>
      <li><input type="checkbox" v-model="qb" />全选</li>
      <li><input type="checkbox" v-model="a" />羽毛球</li>
      <li><input type="checkbox" v-model="b" />运动背心</li>
      <li><input type="checkbox" v-model="c" />短裤</li>
    </ul>
  </div>
  <div>
    <h2>全选反选3</h2>
    <ul>
      <li><input type="checkbox" v-model="sy" />全选</li>
      <li><input type="checkbox" v-model="y" />水杯</li>
      <li><input type="checkbox" v-model="e" />电热毯</li>
      <li><input type="checkbox" v-model="s" />台灯</li>
    </ul>
  </div>
  <!-- reactive -->
  <div>
    <!-- 1. -->
    <p>{{ robj }}</p>
    <button @click="Ck">更改</button>
  </div>
  <div>
    <!-- 1. -->
    <p>{{ reobj }}</p>
    <button @click="Cke">更改</button>
  </div>
  <div>
    <!-- 1. -->
    <p>{{ rsobj }}</p>
    <button @click="Cks">更改</button>
  </div>
  <!-- v-bind -->
  <div>
    <ul>
      <!-- 1. -->
      <li class="li1" :class="[l ? 'a' : 'b']">1111111111</li>
      <li class="li1" :class="{ a: true, b: true }">1111111111</li>
      <li class="li1" :style="{ fontSize: 30 + 'px' }">1111111111</li>
      <img :src="imgUrl" />
      <!-- 2. -->
      <li class="li2" :class="[i ? 'a' : 'b']">22222222222</li>
      <li class="li2" :class="{ a: true, b: false }">22222222222</li>
      <li class="li2" :style="{ color: 'pink' }">22222222222</li>
      <img :src="imgUrl1" />
      <!-- 3. -->
      <li class="li3" :class="[li ? 'a' : 'b']">3333333333</li>
      <li class="li3" :class="{ a: false, b: true }">3333333333</li>
      <li class="li3" :style="{ fontWeight: 900 }">3333333333</li>
      <img :src="imgUrl1" alt="" />
    </ul>
  </div>
</template>
<style scoped>
li {
  list-style: none;
}
img {
  width: 200px;
  height: 200px;
}
</style>
